"use client";
import Alert from "@mui/material/Alert";
import Box from "@mui/material/Box";
import Container from "@mui/material/Container";
import Paper from "@mui/material/Paper";
import Snackbar from "@mui/material/Snackbar";
import { styled } from "@mui/material/styles";
import type { UploadProps } from "antd";
import { message, Steps, Upload } from "antd";
import { useState } from "react";
import StepOne from "./StepOne";
import StepThree from "./StepThree";
import StepOTwo from "./StepTwo";
const Item = styled(Paper)(({ theme }) => ({
  backgroundColor: theme.palette.mode === "dark" ? "#1A2027" : "#fff",
  ...theme.typography.body2,
  padding: theme.spacing(1),
  textAlign: "center",
  color: theme.palette.text.secondary,
  flexGrow: 1,
}));

const { Dragger } = Upload;
const props: UploadProps = {
  name: "file",
  accept: "pdb",
  multiple: false,
  onChange(info) {
    const { status } = info.file;
    if (status !== "uploading") {
      console.log(info.file, info.fileList);
    }
    if (status === "done") {
      message.success(`${info.file.name} file uploaded successfully.`);
    } else if (status === "error") {
      message.error(`${info.file.name} file upload failed.`);
    }
  },
};

const stepPageMap = {
  "0": <StepOne />,
  "1": <StepOTwo />,
  "2": <StepThree />,
};

export default function Hero() {
  const [step, setStep] = useState(0);
  const [open, setOpen] = useState(false);

  const handleNextStep = (stepNum: number) => {
    if (stepNum == 2) {
      setStep(0);
      return;
    }
    setStep(stepNum + 1);
  };

  const handleLastStep = (stepNum: number) => {
    setStep(stepNum - 1);
  };

  return (
    <Box>
      <Container
        sx={{
          display: "flex",
          flexDirection: "column",
          pt: { xs: 10, sm: 16 },
          pb: { xs: 8, sm: 12 },
        }}
      >
        <Box sx={{ marginBottom: "27px" }}>
          <Steps
            current={step}
            items={[
              {
                title: "Choose your Protein Structure",
                subTitle: "(Template)",
              },
              {
                title: "Set GMPS Database",
                subTitle: "(Query)",
              },
              {
                title: "Fill in Your Email And Run",
                subTitle: "(Execute)",
              },
            ]}
          />
        </Box>
        {step == 0 && (
          <StepOne
            handleNextStep={handleNextStep}
            handleLastStep={handleLastStep}
          />
        )}
        {step == 1 && (
          <StepOTwo
            handleNextStep={handleNextStep}
            handleLastStep={handleLastStep}
          />
        )}
        {step == 2 && (
          <StepThree
            handleNextStep={handleNextStep}
            setOpen={setOpen}
            handleLastStep={handleLastStep}
          />
        )}
      </Container>
      <Snackbar
        open={open}
        autoHideDuration={7000}
        anchorOrigin={{ vertical: "top", horizontal: "right" }}
      >
        <Alert
          onClose={() => setOpen(false)}
          severity="success"
          variant="filled"
        >
          The task was submitted successfully
        </Alert>
      </Snackbar>
    </Box>
  );
}
